<%--
  Created by IntelliJ IDEA.
  User: RuoLi
  Date: 2023/2/9
  Time: 10:29
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>题目详情页面</title>
    <script src="<%=request.getContextPath()%>/js/index.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/index.css">
    <!-- axios -->
    <script src="<%=request.getContextPath()%>/js/axios.js"></script>
    <!-- import Vue before Element -->
    <script src="<%=request.getContextPath()%>/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="<%=request.getContextPath()%>/js/element-ui.js"></script>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/main_user.css"/>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/iconfont-ali.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.ttf">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.woff">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/iconfont.ttf">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/iconfont.woff">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/iconfont.woff2">
</head>
<body>
<div id="app">
    <el-page-header @back="goBack" content="题目详情"></el-page-header>
    <el-divider></el-divider>
    <el-row style="margin-top: 25px">
        <el-col :offset="1" :span="1">
            <img :src="collectionImg[0]" @click="collectionTopic" id="collection_id" style="width: 15px;height: 15px;"
                 alt="已收藏">
        </el-col>
        <el-col :span="22">
            <el-tag type="success">{{topicInfo.grade}}</el-tag>
            <el-tag type="success">{{topicInfo.subject_name}}</el-tag>
            <el-tag type="info">{{topicInfo.chapter_name}}</el-tag>
            <el-tag type="info">{{topicInfo.knowledge_point}}</el-tag>
            <el-tag>{{topicInfo.topic_type}}</el-tag>
            <el-button type="text" disabled>编号：{{topicInfo.detailed_topic_id}}</el-button>
<%--            <el-button type="text" disabled>正确率：10.00%</el-button>--%>
        </el-col>
    </el-row>
    <el-row style="margin-top: 25px" type="flex" justify="start">
        <el-col :offset="1" :span="23">
            <%--获取编号 题目--%>
            <span>{{topicInfo.topic_title}}</span>
        </el-col>
    </el-row>
    <%--选项--%>
    <el-row style="margin-top: 25px">
        <el-col offset="1" :span="23" v-if="topicInfo['topic_type']=='选择题'">
            <template>
                <el-radio-group v-model="TopicRadio">
                    <el-radio :label="topicInfo.topic_check_1">A&nbsp;&nbsp;{{topicInfo.topic_check_1}}</el-radio>
                    <el-radio :label="topicInfo.topic_check_2">B&nbsp;&nbsp;{{topicInfo.topic_check_2}}</el-radio>
                    <el-radio :label="topicInfo.topic_check_3">C&nbsp;&nbsp;{{topicInfo.topic_check_3}}</el-radio>
                    <el-radio :label="topicInfo.topic_check_4">D&nbsp;&nbsp;{{topicInfo.topic_check_4}}</el-radio>
                </el-radio-group>
            </template>
        </el-col>
        <el-col offset="1" :span="10" v-if="topicInfo['topic_type']=='填空题'">
            <template>
                <el-input placeholder="请输入答案" v-model="TopicInputAnswer"></el-input>
            </template>
        </el-col>
        <el-col offset="1" :span="23" v-if="topicInfo['topic_type']=='判断题'">
            <template>
                <el-radio-group v-model="TopicCheckAnswer">
                    <el-radio :label="topicInfo.topic_check_1">{{topicInfo.topic_check_1}}</el-radio>
                    <el-radio :label="topicInfo.topic_check_2">{{topicInfo.topic_check_2}}</el-radio>
                </el-radio-group>
            </template>
        </el-col>
    </el-row>
    <%--提交--%>
    <el-row style="margin-top: 25px">
        <el-col :offset="1" :span="2">
            <el-button size="small" @click="checkAnswer" plain type="success">确定</el-button>
        </el-col>
        <el-col :span="2">
            <el-button plain size="small" :disabled="nextButtonDisable" type="primary" @click="nextTopic">下一题</el-button>
        </el-col>
    </el-row>
    <div style="margin-top: 100px;float: left;width: 100%">
        <el-divider></el-divider>
        <el-row>
            <el-col :offset="1" :span="14">
                <el-row>
                    <el-col v-if="topicInfo['topic_type']=='填空题'">
                        你的答案：{{TopicInputAnswer}}
                        <el-tag type="success" v-if="topicStatus==1" size="small">正确</el-tag>
                        <el-tag type="warning" v-if="topicStatus==0" size="small">错误</el-tag>
                    </el-col>
                    <el-col v-if="topicInfo['topic_type']=='选择题'">
                        你的答案：{{TopicRadio}}
                        <el-tag type="success" v-if="topicStatus==1" size="small">正确</el-tag>
                        <el-tag type="warning" v-if="topicStatus==0" size="small">错误</el-tag>
                    </el-col>
                    <el-col v-if="topicInfo['topic_type']=='判断题'">
                        你的答案：{{TopicRadio}}
                        <el-tag type="success" v-if="topicStatus==1" size="small">正确</el-tag>
                        <el-tag type="warning" v-if="topicStatus==0" size="small">错误</el-tag>
                    </el-col>
                    <el-col>
                        <span>答案：{{topicAnswerInterpretation.topicAnswer}}</span>
                    </el-col>
                    <el-col>
                        <span>解析：{{topicAnswerInterpretation.topicAnswerParse}}</span>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="8">
                <div>
                    <el-row :gutter="20">
                        <el-col style="margin-bottom: 10px">
                            <el-button v-for="count in topicLength" circle >0{{count}}</el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                count: 1,
                ObjectLength: '',
                topicInfo: [],
                //选择题
                TopicRadio: '',
                //填空题
                TopicInputAnswer: '',
                //判断题
                TopicCheckAnswer:'',
                //题目状态
                topicStatus: '-1',
                //错题解析
                topicAnswerInterpretation: [],
                collectionImg: [
                    '/online_website/img/collection_0.png',
                    '/online_website/img/collection_1.png'
                ],
                status: 0,
                //题目序号
                topicCount: 0,
                //题目数量
                topicLength: 1,
                //选项栏状态码
                choseStatus_1: 0,
                nextButtonDisable:false,
            }
        },
        methods: {
            goBack() {
                window.location.href = "/online_website/user/main_index.jsp";
            },
            //获取题目详细信息
            getDetailedTopicData() {
                axios({
                    url: "/online_website/common/GoUserTopicPage",
                    method: "post",
                    contentType: "application/json",
                }).then((res) => {
                    //题目数量
                    this.topicLength = res.data.length;
                    this.topicInfo = res.data[this.topicCount];
                    //获取收藏状态 获取正确率
                    this.getTopicFavoritesStatus(this.topicInfo["detailed_topic_id"]);
                    //对象长度
                    this.ObjectLength = res.config.transformRequest.length;
                })
            },
            //验证题目正确性 按钮确定
            checkAnswer() {
                let detailedTopicId = this.topicInfo["detailed_topic_id"];
                if (this.topicInfo["topic_type"] === '选择题') {
                    if (this.TopicRadio.length === 0) {
                        this.$notify({
                            title: '提示',
                            message: '请选择题目答案',
                            type: 'warning'
                        });
                    } else {
                        axios({
                            url: "/online_website/common/CheckTopicAnswer",
                            method: "get",
                            contentType: "application/json",
                            params: {
                                "topicType": this.topicInfo["topic_type"],
                                "detailedTopicId": detailedTopicId,
                                "detailedTopicRadioAnswer": this.TopicRadio
                            },
                        }).then((res) => {
                            this.topicStatus = res.data.status;
                            //获取解析
                            this.getAnswerInterpretation(detailedTopicId, this.TopicRadio)
                        })
                    }
                }
                if (this.topicInfo["topic_type"] === '填空题') {
                    let topicInputAnswer = this.TopicInputAnswer;
                    if (topicInputAnswer.trim().length === 0) {
                        this.$notify({
                            title: '提示',
                            message: '请选择题目答案',
                            type: 'warning'
                        });
                    } else {
                        axios({
                            url: "/online_website/common/CheckTopicAnswer",
                            method: "get",
                            contentType: "application/json",
                            params: {
                                "topicType": this.topicInfo["topic_type"],
                                "detailedTopicId": detailedTopicId,
                                "detailedTopicInputAnswer": this.TopicInputAnswer
                            },
                        }).then((res) => {
                            this.topicStatus = res.data.status;
                            //获取解析
                            this.getAnswerInterpretation(detailedTopicId, this.TopicInputAnswer);
                        })
                    }
                }
                if (this.topicInfo["topic_type"] === '判断题') {
                    let TopicCheckAnswer = this.TopicCheckAnswer;
                    if (TopicCheckAnswer.trim().length === 0) {
                        this.$notify({
                            title: '提示',
                            message: '请选择题目答案',
                            type: 'warning'
                        });
                    } else {
                        axios({
                            url: "/online_website/common/CheckTopicAnswer",
                            method: "get",
                            contentType: "application/json",
                            params: {
                                "topicType": this.topicInfo["topic_type"],
                                "detailedTopicId": detailedTopicId,
                                "detailedTopicCheckAnswer": this.TopicCheckAnswer
                            },
                        }).then((res) => {
                            this.topicStatus = res.data.status;
                            //获取解析
                            this.getAnswerInterpretation(detailedTopicId, this.TopicCheckAnswer);
                        })
                    }
                }
            },
            //获取答案解析
            getAnswerInterpretation(detailedId, inputAnswer) {
                axios({
                    url: "/online_website/common/getAnswerInterpretation",
                    method: "get",
                    contentType: "application/json",
                    params: {
                        "detailedTopicId": detailedId,
                    },
                }).then((res) => {
                    this.topicAnswerInterpretation = res.data;
                    //记录用户信息
                    this.log_userTopicData(detailedId, res.data.topicAnswer, inputAnswer, this.topicStatus);
                })
            },
            //收藏题目
            collectionTopic() {
                var collection_id = document.getElementById("collection_id");
                console.log(this.status)
                collection_id.src = this.collectionImg[this.status % 2];
                if (this.status % 2 === 0) {
                    //取消收藏
                    this.editCollectionTopic(this.status % 2);
                    this.$notify({
                        title: '提示',
                        message: '已添加收藏',
                        type: 'success'
                    });
                } else {
                    //添加收藏
                    this.editCollectionTopic(this.status % 2);
                    this.$notify({
                        title: '提示',
                        message: '已取消收藏',
                        type: 'success'
                    });
                }
                this.status++;
            },
            //编辑收藏状态
            editCollectionTopic(favorites) {
                axios({
                    url: "/online_website/common/GetTopicFavoritesStatus",
                    method: "post",
                    contentType: "application/json",
                    params: {
                        "userAccount":<%=session.getAttribute("userAccount")%>,
                        "detailedTopicId": this.topicInfo["detailed_topic_id"],
                        "favorites": favorites,
                    },
                }).then((res) => {
                    if (res.data !== 1) {
                        //收藏出错
                        console.error(res)
                    }
                })
            },
            //获取题目收藏状态
            getTopicFavoritesStatus(value) {
                axios({
                    url: "/online_website/common/GetTopicFavoritesStatus",
                    method: "get",
                    contentType: "application/json",
                    params: {
                        "userAccount":<%=session.getAttribute("userAccount")%>,
                        "detailedTopicId": value,
                    },
                }).then((res) => {
                    this.status = res.data
                    var collection_id = document.getElementById("collection_id");
                    collection_id.src = this.collectionImg[this.status % 2];
                    this.status++;
                })
            },
            //记录用户答题信息
            log_userTopicData(detailedTopicId, topicAnswer, userAnswer, topicStatus) {
                let userAccount = '<%=session.getAttribute("userAccount")%>'
                axios({
                    url: "/online_website/common/log/LogUserTopicInfo",
                    method: "get",
                    contentType: "application/json",
                    params: {
                        "userAccount": userAccount,
                        "detailedTopicId": detailedTopicId,
                        "topicAnswer": topicAnswer,
                        "userAnswer": userAnswer,
                        "topicStatus": topicStatus,
                    },
                }).then((res) => {
                    if (res.data !== 1) {
                        //记录出错
                        console.error(res)
                    }
                })
            },
            //下一题
            nextTopic() {
                //禁用按钮
                if (this.topicCount<=4){
                    this.topicCount++
                    this.getRandomTopic();
                    if (this.topicCount===4){
                        this.nextButtonDisable=true;
                        this.$message({
                            message: '恭喜你，完成今日练习',
                            type: 'success'
                        });
                    }
                }
            },
            getRandomTopic() {
                axios({
                    url: "/online_website/common/GetRandomTopicCount",
                    method: "post",
                    contentType: "application/json"
                }).then((res) => {
                    if (res.data !== 0) {
                        //题目数量
                        this.topicLength = res.data.length;
                        this.topicInfo = res.data[this.topicCount];
                        //获取收藏状态 获取正确率
                        this.getTopicFavoritesStatus(this.topicInfo["detailed_topic_id"]);
                        //对象长度
                        this.ObjectLength = res.config.transformRequest.length;
                        return 1;
                    } else {
                        return 0;
                    }
                })
            },
        },
        created() {
            let  GetRandomTopicCount='<%=session.getAttribute("GetRandomTopicCount")%>';
            if (parseInt(GetRandomTopicCount) === 1) {
                this.getRandomTopic();
            }else {
                this.getDetailedTopicData();
            }
        },
    })
</script>
</html>
